Aŭreolo Auto Colorize (prototype)
https://img.icons8.com/ios-glyphs/90/christmas-angel.pngRuiniĝa Aŭreolo (Prototype II) のモジュールの一つ。#ProjectCSS #UserCSSCosenseの標準テーマの配色に基づいてAŭreoloのカラーリングの変更行う。
For Ruiniĝa Aŭreolo (Prototype II) (which based on Aŭreolo)
code: theme.nremiel.aureolo-no-container
#NremのCosenseテーマの開発 #Todo
Cosenseの標準テーマの配色を部分的に反映するようにする
配色とページ背景グラデーションの調整
Source code
code:style.css
html:not(data-project-theme=default) {
--search-form-bg: var(--navbar-bg);
}
:root,
body:has(.app) {
html:not(data-project-theme=default) & {
--current-project-skin-name: "Alruina Aŭreolo + Cosense Theme Color";
--c-tc-navbar-button-new-page: var(--new-button-bg);
--c-ic-navbar-button-new-page-hover: var(--new-button-hover-bg);
--c-ic-navbar-button-new-page-active: var(--new-button-active-bg);
--c-ic-navbar-button-new-page-vertical-line: var(--new-button-vertical-color);
--c-ic-navbar-button-new-page-horizontal-line: var(--new-button-horizontal-color);
--c-bg-navbar-search-form: hsl(from var(--search-form-bg) h s l / 15%);
--c-tx-navbar-search-form: midnightblue;
--c-shadow-box-navbar-search-form-focus: var(--c-ui-accent-color);
--shadow-box-navbar-search-form-focus:
0 0 4px hsl(from var(--c-shadow-box-navbar-search-form-focus) h s l / 0.22),
0 0px 6px hsl(from var(--c-shadow-box-navbar-search-form-focus) h s l / 0.22),
0 0 6px hsl(from var(--c-shadow-box-navbar-search-form-focus) h s l / 0.22),
0 -3px 10px hsl(from var(--c-shadow-box-navbar-search-form-focus) h s l / 0.22),
0 8px 16px hsl(from var(--c-shadow-box-navbar-search-form-focus) h s l / 0.24);
}
html:not(data-display-style*=window-has-focus) & {
--c-shadow-box-page-main-alt: var(--navbar-bg);
}
htmldata-project-theme=default-minimal &,
htmldata-project-theme=paper-light & {
--c-ui-accent-color: var(--c-red-5);
--c-ui-accent-color-selectable: var(--c-red-3);
--c-bg-text-selection: var(--card-description-color);
--c-bg-bottom: var(--body-bg);
--c-bg-bottom: hsl(from var(--body-bg) h 12% 90%);
--c-bg-bottom: hsl(from var(--body-bg) h s 85%);
--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);
--c-fg-card-backside: var(--c-red-5);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from midnightblue h 65% 20%);
--c-tx-navbar-project-name: hsl(from var(--c-purple-5) h 65% 20%);
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-yellow-1);
--c-bg-statusbar-page-title: var(--navbar-bg);
--c-tx-statusbar-page-title: midnightblue;
--c-tx-statusbar-page-title: var(--c-purple-5);
--c-bg-statusbar-page-list-status: var(--c-yellow-1);
--c-tx-statusbar-page-list-status: midnightblue;
--c-tx-statusbar-page-list-status: var(--c-purple-5);
--c-tx-h1: hsl(from var(--c-purple-5) h s 1);
}
htmldata-project-theme=paper-dark &,
htmldata-project-theme=hacker1 &,
htmldata-project-theme=hacker2 &,
htmldata-project-theme=summer &,
htmldata-project-theme=spring &,
htmldata-project-theme=autumn &,
htmldata-project-theme=tropical & {
--c-ui-accent-color: var(--c-red-5);
--c-ui-accent-color-selectable: var(--c-red-3);
--c-bg-text-selection: var(--card-description-color);
--c-bg-bottom: var(--body-bg);
--c-bg-bottom: hsl(from var(--body-bg) h 12% 90%);
--c-bg-bottom: hsl(from var(--body-bg) h s 85%);
--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);
--c-fg-card-backside: var(--c-red-5);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 65% 20%);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 100% 10%);
/* --c-tx-navbar-project-name: var(--new-button-bg); */
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-purple-1);
--c-bg-statusbar-page-list-status: var(--c-purple-1);
--c-tx-h1: hsl(from var(--navbar-bg) h s 0);
}
htmldata-project-theme=kyoto &,
htmldata-project-theme=newyork &,
htmldata-project-theme=paris &,
htmldata-project-theme=mred &,
htmldata-project-theme=lgreen & {
--c-ui-accent-color: var(--c-red-5);
--c-ui-accent-color-selectable: var(--c-red-3);
--c-bg-text-selection: var(--card-description-color);
--c-bg-bottom: var(--body-bg);
--c-bg-bottom: hsl(from var(--body-bg) h 12% 90%);
--c-bg-bottom: hsl(from var(--body-bg) h s 85%);
--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);
--c-fg-card-backside: var(--c-red-5);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 65% 20%);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 100% 10%);
/* --c-tx-navbar-project-name: var(--new-button-bg); */
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-purple-1);
--c-bg-statusbar-page-list-status: var(--c-purple-1);
--c-tx-h1: hsl(from var(--navbar-bg) h s 1);
}
/* Stationary */
htmldata-project-theme=blue & {
--c-ui-accent-color: var(--c-red-5);
--c-ui-accent-color-selectable: var(--c-red-3);
--c-bg-text-selection: var(--card-description-color);
--c-bg-bottom: hsl(223, 12%, 90%);
--c-fg-card-backside: var(--c-red-5);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
/* --c-bg-navbar: hsl(from var(--navbar-bg) h s l / 85%); */
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 65% 20%);
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-red-1);
--c-bg-statusbar-page-list-status: var(--c-red-1);
--c-tx-h1: hsl(from var(--navbar-bg) h s 1);
}
htmldata-project-theme=purple & {
--c-ui-accent-color: var(--c-purple-5);
--c-ui-accent-color-selectable: var(--c-purple-3);
--c-bg-text-selection: var(--c-purple-1);
--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);
--c-bg-bottom: hsl(from var(--body-bg) h s 85%);
--c-bg-bottom: hsl(25, 12%, 90%);
--c-bg-bottom: hsl(223, 12%, 90%);
--c-bg-bottom: hsl(from var(--navbar-bg) h 12% 90%);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main: hsl(from var(--navbar-bg) h s 50%);
--c-shadow-box-page-main-alt: var(--c-purple-3);
--c-telomere-unread: var(--navbar-bg);
--c-fg-card-backside: var(--c-red-5);
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 65% 20%);
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-purple-1);
--c-bg-statusbar-page-list-status: var(--c-purple-1);
--c-tx-h1: hsl(from var(--navbar-bg) h s 1);
&:has(.page-status.error) {
--c-shadow-box-page-main: hsl(from deeppink h s 50%);
--c-shadow-box-page-main-alt: var(--c-purple-3);
}
html:not(data-display-style*=window-has-focus)& {
--c-shadow-box-page-main: hsl(from deeppink h s 50%);
--c-shadow-box-page-main-alt: var(--c-purple-3);
--shadow-box-page-main:
0 0 0.25rem rgb(from var(--c-shadow-box-page-main) r g b / 0.2),
2.8px 2.8px 2.2px rgb(from var(--c-shadow-box-page-main) r g b / 0.02),
6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.028),
12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),
22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),
41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.05),
100px 100px 80px rgb(from var(--c-shadow-box-page-main) r g b / 0.035),
-2.8px 2.8px 5.3px rgb(from var(--c-shadow-box-page-main) r g b / 0.01),
-6.7px 6.7px 5.3px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.028),
-12.5px 12.5px 10px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.035),
-22.3px 22.3px 17.9px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.042),
-41.8px 41.8px 33.4px rgb(from var(--c-shadow-box-page-main-alt) r g b / 0.05),
-100px 100px 80px rgb(from var(--c-shadow-box-page-main) r g b / 0.035);
}
}
htmldata-project-theme=green & {
--c-ui-accent-color: var(--c-green-5);
--c-ui-accent-color-selectable: var(--c-green-3);
--c-bg-text-selection: var(--card-description-color);
--c-bg-bottom: var(--body-bg);
--c-bg-bottom: hsl(from var(--body-bg) h 12% 90%);
--c-bg-bottom: hsl(36, 12%, 90%);
--c-bg-bottom: hsl(from var(--navbar-bg) h s 80%);
--c-bg-bottom: hsl(from var(--c-green-3) h s 80%);
--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);
--c-fg-card-backside: var(--navbar-bg);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main: deeppink;
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 65% 20%);
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-green-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-green-1);
--c-bg-statusbar-page-list-status: var(--c-green-1);
--c-tx-h1: hsl(from var(--navbar-bg) h s 1);
}
htmldata-project-theme=orange & {
--c-ui-accent-color: var(--c-red-5);
--c-ui-accent-color-selectable: var(--c-red-3);
--c-bg-text-selection: var(--card-description-color);
--c-bg-bottom: var(--body-bg);
--c-bg-bottom: hsl(from var(--body-bg) h 12% 90%);
--c-bg-bottom: hsl(from var(--body-bg) h s 85%);
--c-bg-page-manu: hsl(from var(--navbar-bg) h s 97% / 50%);
--c-bg-bottom: hsl(36, 12%, 90%);
--c-fg-card-backside: var(--c-red-5);
--border-page-main-top: 8px solid hsl(from var(--navbar-bg) h 20% 90%);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main: var(--body-bg);
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
--c-tx-navbar-project-name: var(--navbar-bg);
--c-tx-navbar-project-name: hsl(from var(--navbar-bg) h 65% 20%);
--c-shadow-box-navbar-search-form-focus: var(--navbar-bg);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-yellow-1);
--c-tx-statusbar-page-title: black;
--c-bg-statusbar-page-list-status: var(--c-yellow-4);
--c-tx-h1: hsl(from var(--navbar-bg) h s 1);
}
htmldata-project-theme=red & {
--c-ui-accent-color: var(--c-red-5);
--c-ui-accent-color-selectable: var(--c-red-3);
--c-bg-text-selection: gold;
--c-bg-text-selection: var(--c-orange-2);
--c-bg-bottom: hsl(0, 12%, 90%);
--c-fg-card-backside: var(--c-red-5);
--c-shadow-box-page-main: hsl(from var(--c-nrem-sango-5) h s 50%);
--c-shadow-box-page-main-alt: var(--c-red-3);
--c-telomere-unread: var(--c-red-1);
--c-tx-navbar-project-name: var(--c-red-3);
--c-bg-stream-page-status-bar: hsl(from var(--c-red-3) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-red-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-red-1);
--c-bg-statusbar-page-list-status: var(--c-red-1);
}
htmldata-project-theme=green & {
--c-ui-accent-color: var(--c-green-5);
--c-ui-accent-color-selectable: var(--c-green-3);
--c-bg-text-selection: var(--c-green-3);
--c-bg-bottom: hsl(223, 12%, 90%);
--c-fg-card-backside: var(--c-green-5);
--c-shadow-box-page-main: hsl(from midnightblue h s 50%);
--c-shadow-box-page-main-alt: var(--navbar-bg);
--c-telomere-unread: var(--navbar-bg);
--c-tx-navbar-project-name: var(--c-green-5);
--c-bg-stream-page-status-bar: hsl(from var(--c-green-5) h s l / 85%);
--shadow-box-popup-menu:
0 0 0.375rem hsl(from var(--c-green-5) / 0.125),
0 0 0.25rem hsl(from var(--c-red-3) / 0.15);
--c-bg-statusbar-page-title: var(--c-green-4);
--c-bg-statusbar-page-list-status: var(--c-green-4);
}
/* ページ背景が暗色のテーマ */
htmldata-project-theme=default-dark &,
htmldata-project-theme=paper-dark-dark & {
}
}